<template>
<div>
    <el-form :model="form" size="small" :rules="rules" ref="form" label-width="160px">

        <!--<div class="panel">
            <div class="hd">人员信息
                <span>*数据表明：用户下单时须填写的越多，转化率越低，请慎重选择</span>
            </div>
            <div class="bd">
                <el-form-item label="联系人信息：" prop="contacts">
                    <el-checkbox-group v-model="form.contacts">
                        <el-checkbox disabled label="name">姓名</el-checkbox>
                        <el-checkbox disabled label="mobile">手机号</el-checkbox>
                        <el-checkbox disabled label="email">邮箱</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否需要出行人信息：" prop="traveller">
                    <el-radio-group v-model="form.traveller">
                       <el-radio label="one">只需要填写一个出行人信息（推荐）</el-radio>
                        el-radio label="all" :disabled="true">需填写每一个出行人的信息（请慎重选择）</el-radio>
                        <el-radio label="none">不需要填写出行人信息</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </div>-->
        <div class="panel">
            <div class="hd">退改规则</div>
            <div class="bd">
                <el-form-item label="取消类型：" prop="isRefund">
                    <el-radio-group v-model="form.isRefund">
                        <el-radio :label="true">按规则退</el-radio>
                        <el-radio :label="false">不可退</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.isRefund == 1">
                    <el-form-item label="旅游者违约：" prop="ruleType">
                        <el-radio-group v-model="form.ruleType">
                            <el-radio label="template">使用模板</el-radio>
                            <el-radio label="cust">有时间限制</el-radio>
                            <el-radio label="nolimit">无时间限制</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.ruleType == 'template'">
                        <el-form-item label="">
                            境内旅游合同模板<br />
                            <span style="color: #999;">在行程前解除合同的，必要的扣费标准为：</span>
                            <table cellspacing="0">
                                <tr>
                                    <th>时间</th>
                                    <th>旅游者违约</th>
                                </tr>
                                <tr>
                                    <td>使用日期前7天01:00（含）之前</td>
                                    <td>旅游费用0.0%</td>
                                </tr>
                                <tr>
                                    <td>使用日期前4天01:00（含）之前</td>
                                    <td>旅游费用10.0%</td>
                                </tr>
                                <tr>
                                    <td>使用日期前1天01:00（含）之前</td>
                                    <td>旅游费用20.0%</td>
                                </tr>
                                <tr>
                                    <td>使用日期当天23:59（含）之前</td>
                                    <td>旅游费用30.0%</td>
                                </tr>
                                <tr>
                                    <td>使用日期当天23:59之后</td>
                                    <td>旅游费用100.0%</td>
                                </tr>
                            </table>
                        </el-form-item>
                        <div class="rinfo">
                            <div class="k">商品详情页展示示例：</div>
                            <div class="v">
                                使用日期前7天01:00前申请取消，不收取手续费。<br />
                                使用日期前4天01:00前申请取消，收取10.00%损失费。<br />
                                使用日期前1天01:00前申请取消，收取20.00%损失费。<br />
                                使用日期当天前申请取消，收取30.00%损失费。<br />
                                使用日期当天后申请取消，收取100.00%损失费。<br />
                                如需改期，请申请取消后重新预定。
                            </div>
                        </div>
                        <div class="rinfo">
                            <div class="k">商家取消条款：</div>
                            <div class="v">
                                订单确认后商家取消，除退还全额费用外，还需按以下标准赔付违约金（不可抗因素除外）；<br />
                                使用日期前1天12:00之后，额外赔付订单金额的100%；<br />
                                其他时间额外赔付金额不得低于同时段用户取消损失费；<br />
                                最少额外赔付订单金额的10%（若不足50元赔付50元）
                            </div>
                        </div>
                    </template>
                    <template v-else-if="form.ruleType == 'cust'">
                        <el-form-item label="损失费用：">
                            <table cellspacing="0" style="width: 100%;">
                                <tr>
                                    <th>取消时间（当地时间）</th>
                                    <th>损失费用</th>
                                </tr>
                                <tr v-for="(item, idx) in list">
                                    <td>
                                        <div class="fmr">
                                            客人取消日期
                                            <el-select v-model="item.type" style="width: 120px;">
                                                <el-option label="使用日期前" value="useDayBefore"></el-option>
                                                <el-option label="使用日期后" value="useDayAfter"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="fmr">
                                            客人取消时间
                                            <el-input-number style="width: 120px; margin-right: 10px;" :min="1" v-model="item.days" placeholder=""></el-input-number>
                                            天
                                            <el-select v-model="item.time" style="width: 120px;">
                                                <el-option v-for="(t, i) in times" :key="i" :value="t"></el-option>
                                            </el-select>
                                        </div>
                                        <div>
                                            <span style="color: #999;">规则预览：</span><strong>使用日期前1天00:00前申请取消，不收取手续费。</strong>
                                        </div>
                                    </td>
                                    <td style="position: relative;">
                                        损失
                                        <el-input-number step-strictly style="width: 120px; margin-right: 10px;" v-model="item.amount" placeholder="" :min="0"></el-input-number>
                                        <el-select v-model="item.unit" style="width: 120px;">
                                            <el-option label="%" value="percent"></el-option>
                                        </el-select>
                                        <div style="position: absolute; right: 10px; bottom: 10px;">
                                            <el-button type="plain" icon="el-icon-plus" @click="addRule" v-if="idx == list.length-1">添加</el-button>
                                            <el-button type="text" @click="list.splice(idx, 1)" v-if="list.length > 1">删除</el-button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <strong>使用日期前1天00:00前申请取消，不收取手续费</strong>
                                    </td>
                                    <td>
                                        <!-- 损失
                      <el-input style="width: 120px; margin-right: 10px;" v-model="defRule.amount" placeholder=""></el-input>
                      <el-select v-model="defRule.unit" style="width: 120px;">
                        <el-option label="%" value="percent"></el-option>
                      </el-select> -->
                                    </td>
                                </tr>
                            </table>
                            <table cellspacing="0" style="margin-top: 20px; width: 100%;">
                                <tr>
                                    <td>
                                        <div class="rinfo">
                                            <div class="k">提示：</div>
                                            <div class="v">1.以客人下单时的违约条款设置为准<br />2.费用损失数值：请填写正整数。支付总费用不可超过100%</div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </el-form-item>
                        <div class="rinfo">
                            <div class="k">商品详情页展示示例：</div>
                            <div class="v">
                                使用日期前7天01:00前申请取消，不收取手续费。<br />
                                使用日期前4天01:00前申请取消，收取10.00%损失费。<br />
                                使用日期前1天01:00前申请取消，收取20.00%损失费。<br />
                                使用日期当天前申请取消，收取30.00%损失费。<br />
                                使用日期当天后申请取消，收取100.00%损失费。<br />
                                如需改期，请申请取消后重新预定。
                            </div>
                        </div>
                        <div class="rinfo">
                            <div class="k">商家取消条款：</div>
                            <div class="v">
                                订单确认后商家取消，除退还全额费用外，还需按以下标准赔付违约金（不可抗因素除外）；<br />
                                使用日期前1天12:00之后，额外赔付订单金额的100%；<br />
                                其他时间额外赔付金额不得低于同时段用户取消损失费；<br />
                                最少额外赔付订单金额的10%（若不足50元赔付50元）
                            </div>
                        </div>
                    </template>
                    <template v-else-if="form.ruleType == 'nolimit'">
                        <el-form-item label="损失费用：">
                            <el-input style="width: 120px; margin-right: 10px;" v-model="form.amount" placeholder=""></el-input>
                            <el-select v-model="form.unit" style="width: 120px;">
                                <el-option label="%" value="percent"></el-option>
                            </el-select>
                        </el-form-item>
                        <div class="rinfo">
                            <div class="k">商品详情页展示示例：</div>
                            <div class="v">
                                该产品支持取消。需收取0.00%损失费。<br />
                                如使用优惠，则损失费用按照优惠价前金额的比例收取，最高不超过实付金额。<br />
                                如需改期，请申请取消后重新预定。
                            </div>
                        </div>
                        <div class="rinfo">
                            <div class="k">商家取消条款：</div>
                            <div class="v">
                                订单确认后商家取消，除退还全额费用外，还需额外赔付订单金额100%的违约金（不可抗因素除外）<br />
                                使用日期前1天12:00之后，额外赔付订单金额的100%；<br />
                                使用日期前1天12:00（含）之前，额外赔付订单金额的10%（若不足50元赔付50元）
                            </div>
                        </div>
                    </template>
                </template>
                <template v-else>
                    <div class="rinfo">
                        <div class="k">商品详情页展示示例：</div>
                        <div class="v">该产品一经预定成功，不支持退改，敬请谅解。<br />如需改期，请申请取消后重新预定。</div>
                    </div>
                    <div class="rinfo">
                        <div class="k">商家取消条款：</div>
                        <div class="v">订单确认后商家取消，除退还全额费用外，还需额外赔付订单金额100%的违约金（不可抗因素除外）</div>
                    </div>
                </template>

            </div>
        </div>

    </el-form>
</div>
</template>

<script>
export default {
  props: ['prodId', 'data'],
  data () {
    return {
      loading: false,
      list: [{}],
      times: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      // defRule: {
      //   type: 'useDayBefore',
      //   days: 1,
      //   time: '00:00',
      //   amount: 0,
      //   unit: 'percent',
      // },
      form: {
        unit: 'percent',
        amount: 0,
        contacts: ['name', 'mobile', 'email'],
        isRefund: 1,
        ruleType: 'template',
        traveller: 'all'
      },
      rules: {

      }
    }
  },
  created () {
    // this.addRule()
    this.initData()
  },
  methods: {
    initData () {
      console.log('data', this.data)
      const {
        cancelRule,
        cancelRuleList
      } = this.data
      if (cancelRule) {
        const {
          isRefund,
          ruleType,
          amount,
          unit,
          contacts,
          traveller
        } = cancelRule
        this.form = {
          isRefund,
          contacts: contacts.split(','),
          ruleType,
          traveller,
          amount,
          unit
        }
        console.log('this.from ', this.form)
      }
      if (cancelRuleList && cancelRuleList.length > 0) {
        cancelRuleList.map(item => {
          const {
            type,
            days,
            amount,
            time,
            unit
          } = item
          this.list.push({
            type,
            days,
            amount,
            time,
            unit
          })
        })
      }
    },
    addRule () {
      this.list.push({
        type: 'useDayBefore',
        days: 0,
        time: '00:00',
        amount: 0,
        unit: 'percent'
      })
    },
    submit () {
      console.log(this.form)
      const sd = JSON.parse(JSON.stringify(this.form))
      sd.customizationId = this.prodId
      sd.contacts = sd.contacts.join(',')
      if (sd.ruleType == 'cust') {
        sd.customizationCancelRuleList = this.list
      }
      this.loading = true
      this.$http.put('/customization/cancelRule', sd).then(res => {
        console.log('res', res)
        if (res.data.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.$parent.getInfo()
          const nextId = 5
          this.$emit('changeSubMenu', nextId)
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fmr {
    padding: 10px 0;
}

.rinfo {
    display: flex;
    padding-bottom: 20px;

    .k {
        width: 148px;
        color: #999;
        text-align: right;
    }

    .v {
        flex: 1;
        font-weight: bold;
        padding-left: 10px;
        line-height: 24px;
    }
}

table {
    width: 800px;
    border-left: 1px solid #e7e8eb;
    border-top: 1px solid #e7e8eb;

    tr {
        th {
            background: #e9f5f9;
        }

        td,
        th {
            text-align: left;
            padding: 10px 12px;
            min-width: 160px;
            border-right: 1px solid #e7e8eb;
            border-bottom: 1px solid #e7e8eb;
        }
    }
}
</style>
